/*
    容器组件
*/
// 引入connect用于连接UI组件与redux
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/actions/count'

// 定义UI组件
class Count extends Component {
    state = {}
    // 加法
    increment = () => {
        const {value} = this.selectNumber;
        this.props.jia(Number(value));
    }
    decrement = () => {
      const {value} = this.selectNumber;
      this.props.jian(Number(value));
    }
    // 奇数再加
    incrementIfOdd = () => {
      const {value} = this.selectNumber;
      if(this.props.count % 2 !== 0) {
        this.props.jia(Number(value))
      }
    }
    // 异步加
    incrementAsync = () => {
      const {value} = this.selectNumber;
      this.props.jiaAsync(Number(value), 500)
    }
    render() {
      console.log('ui',this.props);
      return (
        <>
          <h1>当前求和为: {this.props.count}下方总人数为{this.props.renshu}</h1>
          <hr></hr>
          <select ref={(c) => (this.selectNumber = c)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          &nbsp;
          <button onClick={this.increment}>+</button>&nbsp;
          <button onClick={this.decrement}>-</button>&nbsp;
          <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
          <button onClick={this.incrementAsync}>异步加</button>&nbsp;
        </>
      )
    }
  }
  

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state =>  ({ count: state.he, renshu: state.rens.length }),
    // mapDispatchToProps的一般写法
    // dispatch => ({
    //     // 通知redux执行加法
    //   jia: number => dispatch(createIncrementAction(number)),
    //   jian: number => dispatch(createDecrementAction(number)),
    //   jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number,time)),
    // })

    // mapDispatchToProps的简写
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction,
    }
)(Count)